<template>
  <div class="login-container" @keydown.enter="enter">
    <div class="left">
      <img src="@/assets/images/login-bg.svg" />
    </div>
    <div class="right">
      <img src="@/assets/images/account-logo.png" />
      <p>Springboot3 项目快速启动</p>
      <el-form
        ref="loginFormRef"
        :rules="rules"
        label-width="0"
        label-position="right"
        :model="param"
        style="max-width: 400px; min-width: 40%"
      >
        <el-form-item prop="username">
          <el-input :prefix-icon="User" v-model.trim="param.username" placeholder="用户名/手机号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :prefix-icon="Lock"
            type="password"
            show-password
            v-model.trim="param.password"
            placeholder="密码"
          />
        </el-form-item>
        <el-form-item class="forget">
          <a @click="tips" href="javascript:;">忘记密码</a>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toLogin(loginFormRef!)">登录</el-button>
        </el-form-item>
      </el-form>
      <p class="icp">
        <el-link type="info" target="_blank" href="https://beian.miit.gov.cn/">
          中ICP备20240101001号-1
        </el-link>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock } from '@element-plus/icons-vue'
import { login, type LoginParam } from '@/api/index'
import Cookies from 'js-cookie'
import { useMainStore } from '../stores/mainStore'
import { getUserMenu } from '@/api/index'
import { addDynamicRoute } from '../router'

const router = useRouter()
const mainStore = useMainStore()

const loginFormRef = ref<FormInstance>()
const rules = reactive<FormRules<LoginParam>>({
  username: [{ required: true, message: '请填写用户名' }],
  password: [{ required: true, message: '请填写密码' }]
})

const param = reactive<LoginParam>({
  username: 'admin',
  password: '000000'
})

async function toLogin(formRef: FormInstance) {
  if (!formRef) return
  await formRef.validate((valid: boolean) => {
    if (valid) {
      // 登录接口
      login(param).then(async (res) => {
        if (res.code === 200) {
          ElMessage({
            message: h(
              'div',
              {
                style: {
                  color: '#67C23A',
                  fontSize: '14px'
                }
              },
              [
                `${res.data?.nickname},您好, 欢迎登录`,
                h('br', {}),
                `上次登陆时间:${res.data?.last_login}, 上次登陆IP:${res.data?.last_login_ip}`
              ]
            ),
            type: 'success'
          })

          Cookies.set('token', res.data?.token!)
          getUserMenu().then(async (res) => {
            if (res.code === 200) {
              mainStore.menus = res.data
              await addDynamicRoute(mainStore.menus)
              router.replace({
                path: '/control/workbench'
              })
            }
          })
        }
      })
    } else {
      ElMessage({
        message: '请检查填写内容',
        type: 'warning'
      })
    }
  })
}

// 监听回车键
function enter() {
  toLogin(loginFormRef.value!)
}

// 忘记密码提示
function tips() {
  ElMessage({
    message: '请联系管理员重置您的密码',
    type: 'info'
  })
}

onMounted(async () => {
  let res = await fetch(import.meta.env.VITE_API_BASE_URL + '/auth/ping', {
    method: 'GET',
    headers: {
      Authorization: Cookies.get('token') || ''
    }
  })
  let json = await res.json()
  if (json.code === 200) {
    router.push({
      path: '/'
    })
  }
})
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  width: 100%;
  display: flex;
  @media screen and (max-width: 1000px) {
    flex-direction: column;
  }

  .left {
    height: 100%;
    width: 50%;
    background-color: #2d8cf0;
    display: flex;
    align-items: center;
    justify-content: center;
    @media screen and (max-width: 1000px) {
      width: 100%;
    }
    img {
      width: 90%;
      position: relative;
      left: 50px;
    }
  }

  .right {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    position: relative;
    @media screen and (max-width: 1000px) {
      width: 100%;
    }

    .el-form-item {
      margin-bottom: 30px;
    }

    .forget {
      margin: 0;
      padding: 0;

      a {
        text-decoration: none;
        position: relative;
        top: -15px;
        :hover {
          cursor: pointer;
        }
      }
    }

    img {
      height: 80px;
    }

    p {
      margin: 0;
      color: #808695;
      font-size: 14px;
      margin-bottom: 30px;
    }

    .el-input {
      height: 40px;
    }

    .el-button {
      width: 100%;
      height: 40px;
    }

    .icp {
      position: absolute;
      bottom: 0;
      @media screen and (max-width: 1000px) {
        bottom: -30px;
      }
    }
  }
}
</style>
